<script setup>
import {
  HomeFilled,
  UserFilled,
  List,
  Management,
  MoreFilled
} from '@element-plus/icons-vue'
// import { ref } from 'vue'
</script>
<template>
  <h1>个人博客</h1>
  <el-menu
    active-text-color="#ffd04b"
    background-color="#545c64"
    class="el-menu-vertical-demo"
    default-active="/home"
    text-color="#fff"
    router
  >
    <el-menu-item index="home">
      <el-icon><HomeFilled /></el-icon>首页
    </el-menu-item>
    <el-sub-menu>
      <template #title>
        <el-icon><UserFilled /></el-icon>个人中心
      </template>
      <el-menu-item-group>
        <el-menu-item index="personal">个人信息</el-menu-item>
        <el-menu-item index="2-2">修改信息</el-menu-item>
        <el-menu-item index="2-3">修改密码</el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>
    <el-menu-item index="user"
      ><el-icon><MoreFilled /></el-icon>用户管理</el-menu-item
    >
    <el-menu-item index="classify"
      ><el-icon><List /></el-icon>博客分类管理</el-menu-item
    >
    <el-sub-menu index="5">
      <template #title>
        <el-icon><Management /></el-icon>博客管理
      </template>
      <el-menu-item-group>
        <el-menu-item index="personalblog">个人博客</el-menu-item>
        <el-menu-item index="userblog">用户博客</el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>
  </el-menu>
</template>
<style scoped>
h1 {
  height: 60px;
  letter-spacing: 15px;
  text-align: center;
  line-height: 60px;
  color: aliceblue;
}
</style>
